<template>
  <div>
    <el-card>
      <div slot="header">
        <div class="card-header">
          <el-page-header @back="back">
            <template>
              <div slot="content">
                <div class="out">
                  <p>业主管理</p>
                  <el-button type="primary" icon="el-icon-plus" @click="add"
                    >添加</el-button
                  >
                </div>
              </div>
            </template>
          </el-page-header>
        </div>
      </div>
      <div>
        <el-table
          :data="final_table"
          style="width: 100%"
          @cell-mouse-enter="showDel"
        >
          <el-table-column align="center" prop="propertyCode" label="房产编号">
          </el-table-column>
          <el-table-column align="center" prop="name" label="业主姓名">
          </el-table-column>
          <el-table-column align="center" prop="phone" label="业主电话">
          </el-table-column>
          <el-table-column align="center" prop="idCode" label="身份证">
          </el-table-column>
          <el-table-column
            align="center"
            prop="building"
            label="楼栋号"
            :filters="AllBuilding"
          >
          </el-table-column>
          <el-table-column align="center" prop="room" label="房间号">
          </el-table-column>
          <el-table-column header-align="center" align="center" width="200px">
            <template slot="header" mini slot-scope="scope">
              <div class="table-header">
                <el-input v-model="search" placeholder="输入姓名/身份证/搜索" />
              </div>
            </template>
            <template slot-scope="scope">
              <div></div>
              <i class="el-icon-setting icon" @click="update(scope.row)"> </i>
              <i class="el-icon-close" @click="del(scope.row.idCode)"></i>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-card>
  </div>
</template>

<script>
import { mapState } from "vuex";

export default {
  mounted() {
    let propertyid = this.current_property_index;
    this.getItemByIndex(propertyid);
  },
  watch: {},
  methods: {
    update(row) {
      row.propertyIndex = this.current_property_index
      localStorage.setItem("param", JSON.stringify(row));
      this.$router.push("household-update");
    },
    // del(event) {
    //   this.$confirm("此操作将永久删除该信息, 是否继续?", "提示", {
    //     confirmButtonText: "确定",
    //     cancelButtonText: "取消",
    //     type: "warning",
    //   })
    //     .then(() => {
    //       let idcode = event;
    //       this.axios
    //         .delete("http://47.99.124.245:8082/deleteOwner", {
    //           params: {
    //             idcode: idcode,
    //           },
    //         })
    //         .then((res) => {
    //           let code = res.data.code;
    //           if (code == 200) {
    //             for (let i in this.table) {
    //               if (this.table[i].idCode == idcode) {
    //                 this.table.splice(i, 1);
    //                 break;
    //               }
    //             }
    //             this.$message.success("删除成功");
    //           } else {
    //             this.$message.error("删除失败");
    //           }
    //         })
    //         .catch((err) => {
    //           this.$message.error("删除失败");
    //         });
    //     })
    //     .catch(() => {
    //       this.$message({
    //         type: "info",
    //         message: "已取消删除",
    //       });
    //     });
    // },
    del(event) {
      this.$confirm("此操作将永久删除该信息, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          let idcode = event;
          this.$store.commit("del_db_user", idcode);
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    showDel(event) {
      this.currentItem = event.buildingCode;
    },
    getItemByIndex: function (index) {
      this.axios
        .get("http://47.99.124.245:8082/getAllOwner", {
          params: {
            propertyindex: index,
          },
        })
        .then((res) => {
          console.log(res);
          let formData = res.data.data;
          this.table = [];
          for (let i of formData) {
            console.log(i);
            let obj = {
              propertyCode: i.propertyindex,
              name: i.ownername,
              phone: i.phone,
              idCode: i.idcode,
              building: i.housecode,
              room: i.roomcode,
              buildingCode: i.propertycode, //缺少房产证编号
            };
            this.table.push(obj);
          }
        });
    },
    add() {
      this.$router.push("household-add");
    },
    back() {
      this.$router.go(-1);
    },
  },
  computed: {
    ...mapState(["current_property_index", "db_user"]),
    final_table() {
      return this.db_user.filter(
        (item) =>
          item.propertyIndex == this.current_property_index &&
          ( item.name == this.search ||
            item.idCode == this.search ||
            this.search == "")
      );
    },
    AllBuilding() {
      let set = new Set();
      for (let i of this.table) {
        set.add(i.building);
      }
      let res = [];
      for (let i of set) {
        res.push({ text: i, value: i });
      }
      return res;
    },
  },
  data() {
    return {
      search: "",
      currentItem: {},
      table: [
        {
          name: "周杰伦",
          phone: "13967738813",
          idCode: "330381200101225118",
          building: "8",
          room: "301",
          buildingCode: "AGS21324327",
        },
      ],
    };
  },
};
</script>

<style scoped>
/*-------------------------表头样式-------------------*/
.el-card {
  margin-top: 2rem;
  margin-bottom: 2rem;
}
.card-header {
  width: 100%;
  align-items: center;
}
.card-header p {
  text-align: center;
  font-weight: bold;
  flex: 1;
}
.card-header .el-button {
  margin: 0.5rem;
}
.out {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.el-page-header {
  width: 100%;
}
.card-header >>> .el-page-header__content {
  flex: 1;
}
.card-header >>> .el-page-header__left {
  align-items: center;
}
/*--------------------------------------------------------*/
.el-card {
  margin-top: 2rem;
}
.tail {
  display: flex;
}
.icon {
  margin-right: 1rem;
  margin-left: 1rem;
}
</style>